// 动态生成的select组件
import { h, VNode } from 'vue';
import { ElOption, ElSelect } from 'element-plus/es';
import { Dictionary } from '@/global';
import {
  BaseFormItemConfig, BaseFormItemConfigInterface
} from '@/util/vnode_create_util/dynamic_form_creator/dynamic_form_item_creator';

/**
 * 选项类
 */
export interface SelectOption extends Dictionary{}

/**
 * 选择框配置接口
 */
export interface SelectFormItemConfigInterface<T> extends BaseFormItemConfigInterface<T> {
  options: SelectOption[]| (() => SelectOption[]);
}

/**
 * 普通选择框属性实现类
 */
export class SelectFormItemConfig<T> extends BaseFormItemConfig<T> implements SelectFormItemConfigInterface<T> {
  public options: SelectOption[] | (() => SelectOption[]);
  public constructor (data: Omit<SelectFormItemConfigInterface<T>, 'createMethod'>) {
    super({ ...data });
    this.options = data.options;
  }

  createMethod (config: this, formData: T): VNode {
    const listToOptions = (item: SelectOption) => <ElOption label={item.text} key={item.value} value={item.value}/>;
    console.log(config.inputWidth);
    return <ElSelect v-model:modelValue={formData[config.prop]}
                     style={{ width: config.inputWidth }}
                     onChange={val => config.onChange && config.onChange(val, formData)}
                     disabled={typeof config.disabled !== 'function' ? config.disabled : config.disabled(formData)}
                     key={`form${config.key ?? config.prop as string}`}
                     onBlur={() => config.onBlur && config.onBlur(formData)}>
      {config.options ? (typeof config.options === 'function' ? config.options().map(listToOptions) : config.options.map(listToOptions)) : []}
    </ElSelect>;
  }
}
